<template>
    <div :class="['main-layout', collapse && 'collapse']">
        <aside>
            <header>忘忧君管理系统</header>
            <main>
                <MyMenu :collapse="collapse" :menuList="newMenuList" />
            </main>
        </aside>
        <main>
            <nav>
                <el-button style="float: left;"
                    size="small"
                    @click="collapse = !collapse"
                    :icon="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"/>
                <span class="menu-info">
                    <!-- 当前页面: 首页 > 首页 -->
                    当前页面: {{menuInfo}}
                </span>
                <el-dropdown class="my-dropDown">
                    <span class="el-dropdown-link">
                        {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-edit">修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="exitEvt" icon="el-icon-lightning">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </nav>
            <article>
                <slot/>
            </article>
        </main>
    </div>
</template>
<script>
import MyMenu from './myMenu.vue'
export default {
    components:{
        MyMenu
    },
    data() {
        return {
            collapse: false,
            newMenuList:[],
            menuInfo:'',
            userInfo:{}
        }
    },
    watch:{
        '$route.path':{
            immediate:true,
            handler(val){
                let _this=this
                // console.log(val)
                let result=_this.menuList.find(it=>it.path===val)
                let names=[result.name]
                function loop(pId){
                    let node = _this.menuList.find(it=>it.id===pId)
                    names.unshift(node.name)
                    if(!!node.parent_id) loop(node.parent_id)
                }
                loop(result.parent_id)
                // console.log(names)
                this.menuInfo=names.join(' > ')
            }
        }
    },
    computed:{
        menuList(){
            return this.$store.getters['common/menuList'] 
        }
    },
    mounted(){
        // debugger
        // console.log(JSON.stringify(this.menuList))
        // let arr =this.menuList.filter( it => !it.parent_id)
        // arr.map(it => {
        //     it.children = this.menuList.filter( item => item.parent_id === it.id)
        // })
        // console.log(arr)
       this.newMenuList = this.makeTree(this.menuList)
    //    console.log(JSON.stringify(newMenuList))
       this.userInfo = this.$store.getters['common/userInfo']
    },
    methods:{
        exitEvt(){
            sessionStorage.clear()
            this.$store.commit('common/clear')
            this.$router.push('/login')
        },
        makeTree(arr,pId){
            let newArr=arr.filter(it => (!pId? !it.parent_id: it.parent_id===pId))
            newArr.map(it =>{
                // it.children = arr.filter(item=>item.parent_id===it.id)
                let hasChildren = arr.findIndex(item => item.parent_id===it.id) 
                if(hasChildren >-1){
                    it.children = this.makeTree(arr,it.id)
                    // console.log(it.id)
                }
            })
            return newArr
        }
    }
}
</script>

<style lang="less">
@import '../style/common.less';
    .main-layout {
        display: flex;
        position: relative;
        height: 100%;
        &.collapse {
            > aside {
                flex: 0 0 64px;
            }
        }
        > aside {
            flex: 0 0 240px;
            height: 100%;
            transition: all .25s linear;
            background: #545c64;
            width: 0;
            > header {
                display: block;
                position: relative;
                height: 48px;
                border-bottom: solid 1px white;
                padding-left: 64px;
                font-size: .8rem;
                color: white;
                line-height: 48px;
                overflow: hidden;
                white-space: nowrap;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 48px;
                    width: 64px;
                    background: url('../images/logo-white.png') center center / 26px 26px no-repeat;
                }
            }
            > main {
                display: block;
                position: relative;
                height: calc(100% - 48px);
                overflow-x: hidden;
            }
        }
        > main {
            flex: 1;
            width: 0;
            > nav {
                display: block;
                height: 48px;
                padding: 8px 12px;
                background: white;
                // 因为导航栏中有很多标签，浮动在左右--清除浮动
                &::after {
                    content: '';
                    display: block;
                    height: 0;
                    width: 0;
                    clear: both;
                }
                .menu-info{
                    font-size: .8rem;
                    line-height: 24px;
                    margin-left: 5px;
                    color: gray;
                }
            }
            > article {
                display: block;
                position: relative;
                height: calc(100% - 48px);
                padding: 12px;
                overflow-x: hidden;
            }
        }
    }
    .font-icon{
            .ztl-cls()
        }
    .el-submenu__title{
        i{
            color: white !important;
        }
    }
    .my-dropDown{
        color:blueviolet;
        // padding-left: 45vw;
        float: right;
        line-height: 32px;
        cursor: pointer;
    }
</style>